<template>
  <div class="Major">
    <el-breadcrumb separator="/" style="margin-bottom: 10px">
      <el-breadcrumb-item
        ><el-icon><House /></el-icon
      ></el-breadcrumb-item>
      <el-breadcrumb-item>岗位专业</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div class="content-title">
        <div style="display: flex">
          <div style="line-height: 28px; margin-right: 5px; font-weight: 550">
            名称:
          </div>
          <div style="margin-left: 20px">
            <el-input
              v-model="queryParams.name"
              style="width: 210px"
              placeholder="请输入名称"
            ></el-input>
          </div>
        </div>
        <div style="margin-left: 80px">
          <el-button @click="getTableData()" type="primary" :icon="Search"
            >搜索</el-button
          >
          <el-button @click="reset()" :icon="RefreshRight">重置</el-button>
        </div>
      </div>
      <div class="bottom">
        <div
          style="
            border-bottom: 1px solid rgb(189, 191, 190);
            padding-bottom: 20px;
          "
        >
          <el-button type="primary" :icon="Plus" @click="addData()"
            >新增</el-button
          >
          <el-button @click="batchDelete()" type="danger" :icon="DeleteFilled"
            >删除</el-button
          >
        </div>
        <div>
          <el-table
            class="no-vertical-border"
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            height="350px"
            row-key="id"
            border
            default-expand-all
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" type="index" width="80" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作">
              <template #default="scope">
                <div style="display: flex">
                  <el-button type="primary" link @click="editData(scope.row)">
                    编辑
                  </el-button>
                  <div style="margin: 0 10px; color: rgb(218, 218, 218)">|</div>
                  <el-popconfirm
                    title="你确定要删除这条岗位要求吗?"
                    @confirm="confirmEvent(scope.row)"
                    @cancel="cancelEvent"
                  >
                    <template #reference>
                      <el-button type="primary" link> 删除 </el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              v-show="total > 0"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              v-model:page="queryParams.pageIndex"
              v-model:limit="queryParams.pageSize"
              class="pagination_bom"
            />
            <!-- @pagination="getList"   -->
          </div>
        </div>
      </div>
    </div>
    <!-- 新增或修改表格数据 -->
    <el-dialog center v-model="addDialog" :title="addTitle" width="600">
      <div style="padding-top: 20px">
        <el-form :model="form" label-width="120px">
          <el-form-item v-if="editCode == 2" label="选择专业: " prop="courseNo">
            <el-select
              v-model="form.parentId"
              placeholder="请选择专业"
              style="width: 80%"
            >
              <el-option
                v-for="item in majorData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="editCode == 1" label="专业名称" prop="courseNo">
            <el-input
              style="width: 80%"
              v-model="form.name"
              placeholder="请输入专业名称"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="editCode == 2" label="岗位名称" prop="courseNo">
            <el-input
              style="width: 80%"
              v-model="form.name"
              placeholder="请输入岗位名称"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-foot">
        <el-button
          v-if="addTitle == '添加专业或者岗位'"
          @click="verifyAddData()"
          type="primary"
          class="foot-button"
          :disabled="clicked"
          >确认</el-button
        >
        <el-button
          v-else
          @click="verifyEditData()"
          type="primary"
          class="foot-button"
          :disabled="editClicked"
          >确认</el-button
        >
        <el-button
          @click="addDialog = false"
          type="primary"
          class="foot-button"
          plain
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="Major">
import {
  House,
  Search,
  RefreshRight,
  Plus,
  DeleteFilled,
} from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";

import {
  getTable,
  getMajor,
  verifyAdd,
  edit,
  verifyEdit,
  deleteTable,
  deleteTableAll,
} from "@/api/major";

const total = ref(1);
const form = ref({
  token: localStorage.getItem("Token"),
  parentId: "",
  name: "",
});

const queryParams = ref({
  token: localStorage.getItem("Token"),
  name: "",
  pageIndex: 1,
  pageSize: 10,
});

const tableData = ref([]);

const editCode = ref("");
const formCode = ref("1");

const clicked = ref(false); // 确认按钮防抖参数
const editClicked = ref(false); // 编辑确认按钮防抖参数

const addDialog = ref(false);
const addTitle = ref("");

const ids = ref([]);

const majorData = ref([]);

// 获取表格数据
async function getTableData() {
  const res = await getTable(queryParams.value);
  tableData.value = res.data;
  total.value = res.count;
}
// 表格选取
function handleSelectionChange(val) {
  if (val.length == 0) {
    formCode.value = 1;
  } else {
    ids.value = val.map((item) => item.id);
    formCode.value = 2;
    if (val[0].parentId == 0) {
      form.value.parentId = val[0].id;
    } else {
      form.value.parentId = val[0].parentId;
    }
  }
}

// 重置按钮
function reset() {
  queryParams.value.name = "";
  getTableData();
}
editCode.value = 2;

// 新增按钮
function addData() {
  addDialog.value = true;
  addTitle.value = "添加专业或者岗位";
  form.value.name = "";
  majorList();
  if (formCode.value == 1 || tableData.value == undefined) {
    editCode.value = 1;
    form.value.parentId = "";
  } else {
    editCode.value = 2;
  }
}

// 获取新增弹窗里的专业数据
async function majorList() {
  const res = await getMajor();
  majorData.value = res;
}

// 确认新增
async function verifyAddData() {
  if (clicked.value) return;
  clicked.value = true;
  setTimeout(() => {
    clicked.value = false;
  }, 3000);

  const res = await verifyAdd(form.value);
  if (res.code == 0) {
    ElMessage({
      message: "新增成功",
      type: "success",
    });
    addDialog.value = false;
    getTableData();
  }
}

// 表格内编辑按钮
async function editData(row) {
  majorList();
  form.value.parentId = "";
  form.value.name = "";
  addTitle.value = "修改专业或者岗位";
  addDialog.value = true;
  const res = await edit(row.id);
  if (res.parentId == 0) {
    editCode.value = 1;
    form.value = res;
    form.value.parentId = "";
  } else {
    editCode.value = 2;
    form.value = res;
  }
}

// 编辑弹窗确认按钮
async function verifyEditData() {
  if (editClicked.value) return;
  editClicked.value = true;
  setTimeout(() => {
    editClicked.value = false;
  }, 3000);
  const res = await verifyEdit(form.value);
  if (res.code == 0) {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
  }
  addDialog.value = false;
  getTableData();
}

// 表格内删除按钮
async function confirmEvent(row) {
  const res = await deleteTable(row.id);
  if (res.code == 0) {
    getTableData();
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  }
}

function cancelEvent() {
  console.log("取消删除");
}

// 批量删除
async function batchDelete() {
  if (ids.value.length == 0) {
    ElMessage({
      message: "请选择删除的数据并勾选",
      type: "warning",
    });
  } else {
    const res = await deleteTableAll(ids.value);
    if (res.code == -1) {
      ElMessage({
        message: res.msg,
        type: "error",
      });
    }
    if (res.code == 0) {
      ElMessage({
        message: "批量删除成功",
        type: "success",
      });
    }
    getTableData();
  }
}
onMounted(() => {
  getTableData();
  majorList();
});
</script>

<style lang="scss" scoped>
.content {
  background: #fff;
  height: calc(100vh - 148px);

  border-top: 1px solid rgb(189, 191, 190);
  border-right: 1px solid rgb(189, 191, 190);
  border-left: 1px solid rgb(189, 191, 190);

  .content-title {
    display: flex;
    padding: 20px;
    // height: 38px;
    width: 100%;
    border-bottom: 1px solid rgb(189, 191, 190);
    margin-bottom: 20px;
  }

  .bottom {
    padding: 20px;
    border-top: 1px solid rgb(189, 191, 190);
  }
}

.dialog-foot {
  width: 100%;
  text-align: center;
  padding: 20px 0;

  .foot-button {
    width: 120px;
    height: 35px;
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
</style>
